﻿ <!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<head>
    <title>About | Help | How to use?</title>
    <style>
        /* cyrillic-ext */
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 300;
          src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/DXI1ORHCpsQm3Vp6mXoaTQ7aC6SjiAOpAWOKfJDfVRY.woff2) format('woff2');
          unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
        }
        /* cyrillic */
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 300;
          src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/DXI1ORHCpsQm3Vp6mXoaTRdwxCXfZpKo5kWAx_74bHs.woff2) format('woff2');
          unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
        }
        /* greek-ext */
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 300;
          src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/DXI1ORHCpsQm3Vp6mXoaTZ6vnaPZw6nYDxM4SVEMFKg.woff2) format('woff2');
          unicode-range: U+1F00-1FFF;
        }
        /* greek */
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 300;
          src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/DXI1ORHCpsQm3Vp6mXoaTfy1_HTwRwgtl1cPga3Fy3Y.woff2) format('woff2');
          unicode-range: U+0370-03FF;
        }
        /* vietnamese */
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 300;
          src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/DXI1ORHCpsQm3Vp6mXoaTfgrLsWo7Jk1KvZser0olKY.woff2) format('woff2');
          unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
        }
        /* latin-ext */
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 300;
          src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/DXI1ORHCpsQm3Vp6mXoaTYjoYw3YTyktCCer_ilOlhE.woff2) format('woff2');
          unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
        }
        /* latin */
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 300;
          src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
        }
        /* cyrillic-ext */
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 600;
          src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(fonts/MTP_ySUJH_bn48VBG8sNSg7aC6SjiAOpAWOKfJDfVRY.woff2) format('woff2');
          unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
        }
        /* cyrillic */
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 600;
          src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(fonts/MTP_ySUJH_bn48VBG8sNShdwxCXfZpKo5kWAx_74bHs.woff2) format('woff2');
          unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
        }
        /* greek-ext */
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 600;
          src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(fonts/MTP_ySUJH_bn48VBG8sNSp6vnaPZw6nYDxM4SVEMFKg.woff2) format('woff2');
          unicode-range: U+1F00-1FFF;
        }
        /* greek */
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 600;
          src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(fonts/MTP_ySUJH_bn48VBG8sNSvy1_HTwRwgtl1cPga3Fy3Y.woff2) format('woff2');
          unicode-range: U+0370-03FF;
        }
        /* vietnamese */
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 600;
          src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(fonts/MTP_ySUJH_bn48VBG8sNSvgrLsWo7Jk1KvZser0olKY.woff2) format('woff2');
          unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
        }
        /* latin-ext */
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 600;
          src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(fonts/MTP_ySUJH_bn48VBG8sNSojoYw3YTyktCCer_ilOlhE.woff2) format('woff2');
          unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
        }
        /* latin */
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 600;
          src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(fonts/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
        }

        * {
          margin: 0;
          padding: 0;
        }

        html, body {
            background-color: #F3F3F3;
            font-family: 'Open Sans', 'Segoe UI Light','Segoe UI',Verdana,Arial;
            font-size: 1.2em;
            overflow: auto;
            padding: 5px 10px;
        }

        hr {
            border: 0;
            border-top: 1px solid gray;
        }

        div {
            padding: 4px 8px;
        }

        div.btn {
              text-decoration: none;
              outline: none;
              border:0;
              font-size: inherit;
              cursor: pointer;
            }

            div.btn:hover {
              color: #ffffff;
              background: #3cb0fd;
              background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
              background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
              background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
              background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
              background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
              text-decoration: none;
            }
        a {
            outline: none;
            text-decoration: none;
            color: #0C97BB;
        }

        ul, ol {
            margin-left: 2em;
        }

        img.info-image {
          width: 100%;
          margin: 5px 0;
          border: 1px solid black;
          border-radius: 5px;
        }
    </style>
</head>
<body>
    <h4 style="display:inline-block;margin-right:15px;">How to use?</h4>

    You may wanna check <a href="options.html">options page</a>.<br><br>

    <img class="info-image" src="https://cdn.webrtc-experiment.com/images/fs/page-1.png">
    <img class="info-image" src="https://cdn.webrtc-experiment.com/images/fs/page-2.png">
    <img class="info-image" src="https://cdn.webrtc-experiment.com/images/fs/page-3.png">
    <img class="info-image" src="https://cdn.webrtc-experiment.com/images/fs/page-4.png">
    <img class="info-image" src="https://cdn.webrtc-experiment.com/images/fs/page-5.png">
    <img class="info-image" src="https://cdn.webrtc-experiment.com/images/fs/page-6.png">
    <img class="info-image" src="https://cdn.webrtc-experiment.com/images/fs/page-7.png">
    <img class="info-image" src="https://cdn.webrtc-experiment.com/images/fs/page-8.png">
    <img class="info-image" src="https://cdn.webrtc-experiment.com/images/fs/Options.png">

    This chrome extension is open-sourced here:<br>

    <a href="https://github.com/muaz-khan/Chrome-Extensions/tree/master/file-sharing">https://github.com/muaz-khan/Chrome-Extensions/tree/master/file-sharing</a>

    <br><br>

    Here is Live URL: <a href="https://webrtcweb.com/fs">webrtcweb.com/fs</a>

    <br><br>

    You can share files with android/ios users as well:<br>

    <a href="https://play.google.com/store/apps/details?id=com.webrtc.experiment">https://play.google.com/store/apps/details?id=com.webrtc.experiment</a>

    <br>

    iOS link will be added soon.

    <br><br>

    <h2>Hints:</h2>
    <ul>
        <li>You can set custom/reusable room-ids via "options" page.</li>
        <li>Make sure that non-one can guess your room-id</li>
        <li>Anyone can join you using that room-id</li>
        <li>Your file receivers can use Windows/Mac/Linux or Android/iPhone/iPad</li>
        <li>On Windows/Mac/Ubuntu, your file receivers can use any modern browser e.g. Firefox, Chrome, Opera etc.</li>
        <li>Your file receivers don't need to install Android app. They can use Chrome/Firefox/OperaMini on Android.</li>
        <li>The most important part is your "room-id". Other users can join you only using your room-id.</li>
        <li>Two users can receive files directly using Chrome extension.</li>
    </ul>

    <br><br>

    <h2>How it use?</h2>

    <ul>
        <li>Click extension icon from any page e.g. from facebook.com, google.com etc.</li>
        <li>As soon as you will click the icon, you will see a popup. That popup guides you for all logs.</li>
        <li>That popup will show information e.g. whether your are connected or not.</li>
        <li>As soon as you will get connected, please share resulting URL or ask other users to use same room-id to join you.</li>
        <li>Other users can use same-procedure to join you.</li>
        <li>You can change room-id inline, directly from the popup.</li>
        <li>You can change room-id via options page as well.</li>
        <li>Popup allows you select & share your own files.</li>
        <li>Popup provides file-progress information as well.</li>
        <li>File progress information are added in the extension-icon as well. So you can see file being sent/received even if popup is closed.</li>
        <li>If you close pop, <b>this doesn't means that you closed the room</b>.</li>
        <li>You can close room only by <b>reloading your current page</b>.</li>
    </ul>

    <br><br>

    <h2>How it works?</h2>

    <ul>
        <li>This extension is running top-over WebRTC data channel APIs.</li>
        <li>WebRTC SCTP protocol is used to open peer-to-peer data connections between two users</li>
        <li>Peer-to-Peer means that your files are NEVER uploaded to server. Server is keeping nothing.</li>
        <li>Your files are shared directly with other users. It is 100% private.</li>
        <li>Your files history is lost/cleared from browser memory as soon as you reload your current page.</li>
    </ul>

    <br><br>

    Please read more on wikipedia: <a href="https://en.wikipedia.org/wiki/Stream_Control_Transmission_Protocol">https://en.wikipedia.org/wiki/Stream_Control_Transmission_Protocol</a>

    <br><br>

    This extension is deployed here: <a href="https://chrome.google.com/webstore/detail/webrtc-file-sharing/nbnncbdkhpmbnkfngmkdbepoemljbnfo">https://chrome.google.com/webstore/detail/webrtc-file-sharing/nbnncbdkhpmbnkfngmkdbepoemljbnfo</a>
</body>
</html>
